{% extends 'endbase.html' %}
{% block title %}
	专题管理
{% endblock %}
{% block head %}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <script src="{{ url_for('static',filename='js/addtopic.js') }}"></script>
<style>
    .small-container{
            margin-top: 20px;
            margin-bottom: 20px;
        }
    .upload-box{
        width: 200px;
        height: 200px;
        border: 2px dashed #d3d8df;
        border-radius: 8px;
        cursor: pointer;
        overflow: hidden;
        justify-content: center;
        align-items: center;
        position: relative;
        background-color: whitesmoke;
        display: flex;
    }
    .upload-box:hover{
        border-color: #adbbbf;
        background-color: white;
    }
    .preview-image{
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: none;
    }
    .plus-icon{
        color: #e1d7d7;
        transition: color 0.3s ease;
        font-size: 5rem;
    }
    .upload-box:hover .plus-icon{
        color: #adbbbf;
    }
    .required::after{
        {#content: "*";#}
        color: #00d95a;
        margin-left: 3px;

    }
    a{
        color: #0000cc;
    }

</style>
{% endblock %}

{% block body %}
<div class="container" style="height: 100vh">

    <input type="hidden" id="addTopicUrl" value="{{ url_for('security.add_topic') }}">
    <input type="hidden" id="addBlogUrl" value="{{ url_for('security.add_blog') }}">

    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" id="openModalBtn" >新增专题</button>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close " data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">新增专题</h4>
                </div>
                <div class="modal-body">
                    <form action="" class="form-horizontal" role="form" method="post" id="addTopicForm">
                        <div class="form-group">
                            <label for="topicname" class="control-label col-md-2" >名称</label>
                            <div class="col-md-8">
                                <input type="text" id="topicname" name="topicname" class="form-control " placeholder="请输入专题名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="picname" class="control-label col-md-2 required">封面</label>
                            <div class="col-md-8">
                                <div class="upload-area">
                                    <input type="file" id="coverUpload" accept="image/*"
                                    style="display: none" onchange="previewImage(this)" name="picname">

                                    <label for="coverUpload" class="upload-box" style="">
                                        <div  class="plus-icon">
                                             <i class="bi bi-plus-lg fs-1"></i>
                                        </div>
                                        <img id="preview" class="preview-image">
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="topiccontent" class="control-label col-md-2" >简介</label>
                            <div class="col-md-8">
                                <textarea  id="topiccontent" name="topiccontent" class="form-control" placeholder="简介 200字以内"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary" onclick="submitTopic()" id="submittop">
                        确定
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 模态框2：新增专题文章-->
    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel2">添加文章</h4>
                </div>
                <div class="modal-body">
                    <form action="#" class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="blogtitle" class="control-label col-md-2" >标题</label>
                            <div class="col-md-8">
                                <input type="text" id="blogtitle" class="form-control " placeholder="请输入文章标题">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="CoverUpload" class="control-label col-md-2 required">封面</label>
                            <div class="col-md-8">
                                <div class="upload-area">
                                    <input type="file" id="blogCoverUpload" accept="image/*"
                                    style="display: none" onchange="previewImageBlog(this)" name="picname">
                                    <label for="blogCoverUpload" class="upload-box" style="">
                                        <div  class="plus-icon">
                                             <i class="bi bi-plus-lg fs-1"></i>
                                        </div>
                                        <img id="previewBlog" class="preview-image">
                                    </label>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="submitbg" onclick="submitblog()">提交更改</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>


    <div class="topiclist">
            <table class="table table-condensed">
                <thead>
                    <tr>
                        <th class="col-md-1" >封面</th>
                        <th class="col-md-3">名称</th>
                        <th class="col-md-4">简介</th>
                        <th class="col-md-1">博客数</th>
                        <th class="col-md-3 text-center" style="">操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for topic in topics %}
                    <tr>
                        <td>
                            {% if topic.cover %}
                            <img src="{{ url_for('static',filename=topic.cover) }} " style="width: 100px;height: 100px;">
                            {% else %}
                            <img src="{{ url_for('static',filename='images/1.jpg') }} " style="width: 100px;height: 100px;">
                            {% endif %}
                        </td>
                        <td>
                            <div class="small-container" style="margin-top: 20px;margin-bottom: 20px">
                                <div>{{ topic.name }}</div>
                            </div>
                        </td>
                        <td>
                            <div class="small-container">{{topic.desc}}</div>
                        </td>
                        <td>
                            <div class="small-container">
                                <div>{{ topic.blog_count }}</div>
                            </div>

                        </td>
                        <td>
                            <div class="small-container text-center">
                                <a href="javascript:void(0);"
                                   class="edit-topic-btn"
                                   data-id="{{ topic.id }}"
                                   data-name="{{ topic.name }}"
                                   data-desc="{{ topic.desc }}"
                                   data-cover="{{ url_for('static', filename=topic.cover or 'images/1.jpg') }}">
                                   编辑
                                </a>|
                                <a href="javascript:void(0);" onclick="deleteTopic({{ topic.id }})">删除</a>|
{#                                <a href="javascript:void(0)" id="btn">新增文章</a>#}
                                <a class=" add-article-btn" data-topic-id="{{ topic.id }}">新增文章</a>


                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>






</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.edit-topic-btn').forEach(function (btn) {
        btn.addEventListener('click', function () {
            const { id, name, desc, cover } = this.dataset;
            editTopic(id, name, desc, cover);
        });
    });
});

{#模态框2#}
document.querySelectorAll('.add-article-btn').forEach(function (btn) {
    btn.addEventListener('click', function () {
        $('#myModal2').modal('show');
    });
});

//监听
document.addEventListener('DOMContentLoaded', function () {
    const addButtons = document.querySelectorAll('.add-article-btn');
    const submitButton = document.getElementById("submitbg");

    addButtons.forEach(function (btn) {
        btn.addEventListener('click', function () {
            const topicId = btn.getAttribute('data-topic-id');
            // 把 topic_id 写入提交按钮
            submitButton.setAttribute('data-topic-id', topicId);

            // 打开模态框
            $('#myModal2').modal('show');
        });
    });
});
</script>
{% endblock %}